<!--
 * @Author: 灰灰
 * @Date: 2022-01-07 20:28:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-09 20:02:42
 * @Description: echart 图表和 表格结合起来
-->

<template>
  <div>
    <echart-view ref="echartViewRef"
                 v-if="!$slots.default"
                 :option="chartOption"></echart-view>
    <div :style="tableStyle"
         v-if="!$slots.default">
      <common-table :dataList="data"
                    :overflowCols="overflowCols"
                    :tableCols="tableCols"></common-table>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    left: {// 默认是table的left
      type: String,
      default: '100'
    },
    right: {// 默认是table的right
      type: String,
      default: '100'
    },
    chartLeft: { // chart 的 grid 的left
      type: String,
      default: '100'
    },
    chartRight: {// chart 的 grid 的right
      type: String,
      default: '100'
    },
    option: {
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    },
    data: {
      type: Array,
      require: true,
      default: () => []
    },
    cols: {
      type: Array,
      require: true,
      default: () => []
    },
    // 溢出列 colIndex ， colWidth
    overflowCols: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableCols: []
    }
  },
  computed: {
    chartOption () {
      Object.assign(this.option.grid, {
        left: this.chartLeft || this.left,
        right: this.chartRight || this.right,
        bottom: 0
      })
      // if ((typeof this.option.xAxis == 'object') && this.option.yAxis.constructor == Array) {
      //   this.option.yAxis.forEach(item => {
      //     Object.assign(item, {
      //       axisLabel: {
      //         show: false
      //       }
      //     })
      //   })
      // } else {
      Object.assign(this.option.xAxis, {
        axisLabel: {
          show: false
        }
      })
      // }

      if ((typeof this.option.yAxis == 'object') && this.option.yAxis.constructor == Array) {
        this.option.yAxis.forEach(item => {
          Object.assign(item, {
            axisLabel: {
              verticalAlign: 'bottom'
            }
          })
        })
      } else {
        Object.assign(this.option.yAxis, {
          axisLabel: {
            verticalAlign: 'bottom'
          }
        })
      }
      return this.option
    },
    tableStyle () {
      return {
        paddingLeft: this.left + 'px',
        paddingRight: this.right + 'px'
      }
    },
  },
  watch: {
    cols: {
      deep: true,
      immediate: true,
      handler () {
        this.tableCols = this.getTableCols();
      }
    }
  },
  methods: {
    updateCols () {
      this.tableCols = this.getTableCols();
    },
    getTableCols () {
      const cols = JSON.parse(JSON.stringify(this.cols));
      this.$nextTick(() => {
        // 获取需要平分的宽度
        const nodeWidth = this.$refs.echartViewRef.$el.offsetWidth - (this.chartLeft || this.left) - (this.chartRight || this.right);
        // 需要平分的列数
        const length = (cols.length - this.overflowCols.length);
        const colWidth = parseInt(nodeWidth / length);
        // 获取溢出的宽度
        const overflowWidth = nodeWidth - colWidth * length;
        cols.forEach((item, index) => {
          // 不能用小数点，最后一列，加上多余的数值
          const width = colWidth + ((index == cols.length - 1) ? overflowWidth : 0);
          this.$set(item, 'width', width);
        })
      })
      return cols
    }
  }
}
</script>

<style>
</style>